<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>3事件传参</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="demo">
            <button @click="showMsg1('Vue学习第二天')">信息1</button>
            <button @click="showMsg2('事件传参','学习')">信息2</button>
            <!-- 不传参数时,showMsg会收到一个event事件对象,传参且想用事件对象需要用$event来占位 -->
            <button @click="showMsg3('注意',$event)">信息3</button>
            <button @click="showMsg4">信息4</button>
            <!-- 参数可以靠传递使用,也可以通过this直接使用,this指的是VM实例 -->
            <button @click="showMsg5(name)">信息5</button>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#demo',
            data:{
				name:'尚硅谷',
				address:'宏福科技园'
			},
            methods: {
                showMsg1(msg){
                    alert(msg)
                },
                showMsg2(msg1,msg2){
                    alert(msg1+msg2)
                },
                showMsg3(msg,e){
                    alert(msg+e.target.innerHTML)
                },
                showMsg4(e){
                    alert(e.target.innerHTML)
                },
                showMsg5(name){
                    alert(name+'位于'+this.address)

                }
            }
        })
    </script>
</html>